<template>
  <div class="fu">
    <div class="left">
      <i class="el-icon-collection"></i>
      <span>选修课程</span>
    </div>
    <div style="clear: left"></div>
    <div class="wai-bord">

      <el-form :inline="true" :model="pageList" class="demo-form-inline right">

        <el-form-item>
          <el-input v-model="pageList.cname" placeholder="课程名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="pageList.tname" placeholder="讲师名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <div style="clear: right"></div>

      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :page-size="pageList.pageSize"
        :total="pageList.total">
      </el-pagination>

      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">

            <el-table-column
              prop="courseId"
              label="课程ld">
            </el-table-column>

            <el-table-column
              prop="courseName"
              label="课程名">
            </el-table-column>

            <el-table-column
              prop="teacherName"
              label="教师">
            </el-table-column>

            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>

            <el-table-column
              prop="courseTime"
              label="上课时问">
            </el-table-column>

            <el-table-column
              prop="courseSelectedCount"
              label="已选人数">
            </el-table-column>

            <el-table-column
              prop="courseMaxSize"
              label="班级容量">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleSaveCourse(scope.$index, scope.row)">选课</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {get, post, update} from "../../common/request";

  export default {
    name: "StudentElective",
    data() {
      return {
        tableData: [
          {
            courseId: 1,
            courseName: '',
            teacherName: '',
            courseCredit: '',
            courseTime: '',
            courseSelectedCount: '',
            courseMaxSize: ''
          }
        ],
        pageList:{
          currentPage:1,
          pageSize:8,
          total:0,
          cname:'',
          tname:''
        }
      }
    },
    mounted() {
      this.getAll();
    },
    methods:{
      getAll(){
        get("/course/getSelectCourse",this.pageList).then(res=>{
          this.tableData = res.data.list;
          this.pageList.currentPage = res.data.currentPage;
          this.pageList.pageSize = res.data.pageSize;
          this.pageList.total = res.data.total;
        })
      },
      handleSaveCourse(index, row) {
        console.log(index, row);

        post("/studentCourse/saveCourse",row).then(res=>{
          this.getAll();
          if (res.code == 1){
            this.$message.success(res.msg);
          }else {
            this.$message.error(res.msg);
          }
        })
      },
      handleCurrentChange(val){
        this.pageList.currentPage = val;
        this.getAll();
      },
      onSubmit(){
        this.getAll();
      }
    }
  }
</script>

<style scoped>

  .left {
    float: left;
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }

  .wai-bord {
    background-color: white;
    border: #dcdfe6 solid 1px;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .right{
    float: right;
  }
</style>
